<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由的嵌套</title>
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/shopping">商场</router-link>
			<router-link to="/zoo">动物园</router-link>
			<router-view></router-view>
		</div>
		
		<!-- 定义商场组件 -->
		<template id="shoppingTem">
			<div>
				<h1>我是商场的组件</h1>
				<router-link to="/shopping/shoe">鞋店</router-link>
				<router-link to="/shopping/phone">手机店</router-link>
				<router-view></router-view>
			</div>
		</template>
		
		<!-- 定义商场组件 -->
		<template id="zooTem">
			<div>
				<h1>我是动物园的组件</h1>
				
			</div>
		</template>
		<template id="shoeTem">
			<div>
				<h1>我是鞋店</h1>
			</div>
		</template>
		
		<template id="phoneTem">
			<div>
				<h1>我是手机店</h1>
			</div>
		</template>
		
	</body>
	
	<script>
		const shopping = {
			template:'#shoppingTem'
		}
		
		
		const zoo = {
			template:'#zooTem'
		}
		
		const shoe = {
			template:'#shoeTem'
		}
		
		const phone = {
			template:'#phoneTem'
		}
		
		// 如果需要嵌套，则使用关键字children
		const router = new VueRouter({
			routes:[
				{
					path:'/shopping',
					component:shopping,
					children:[
						{path:'/shopping/shoe',component:shoe},
						{path:'/shopping/phone',component:phone}
					],
				},
				{
					path:'/zoo',
					omponent:zoo,
				}
			]
		})
		
		const app = new Vue({
			el:'#app',
			router:router
		})
		
	</script>
</html>
